<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .playdiv {
            height: 348px;
            width: 398px;
            border: solid 1px #00e;
            float: left;
        }
        
        .pushvideo {
            width: 200px;
            height: 200px;
            overflow: auto;
        }
        
        .playvideo {
            width: 280px;
            height: 280px;
            overflow: auto;
            background-color: rgba(255, 255, 255, 0);
        }
        
        .urlinput {
            width: 250px;
            height: 20px;
        }
    </style>
    <meta charset="utf-8">
    <meta name="description" content="PlayerX">
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta id="theme-color" name="theme-color" content="#ffffff">
    <base target="_blank">
    <script src="./jquery.min.js"></script>
    <script src="./RecordRTC.js"></script>
    <script src="./getScreenId.js"></script>
    <script src="./adapter.min.js"></script>
    <script src="./mrtcsession.js"></script>
</head>

<body>
    <a href="/xxx/MuduCapture.crx" download="MuduCapture.crx">
        chrome下载插件
    </a> <br> host :118.178.135.125 myun.tv
    <div style="border: solid 5px rgb(162, 2, 255); height:704px; width:1158px;">
        <div style=" border: solid 2px #0e0; height:700px; width:350px; float:left;">
            <div>
                <br>mrtc://mudu.ns.4l.hk:8188/AAAAA/pgm<br> publish url: <input type="text" id="pushurl1" class="urlinput" placeholder="mrtc://mudu.ns.4l.hk/AAAAA/pgm " />
                <div id="localVideo1" class="pushvideo"></div>
                <button id="publishScreen1">publishScreen</button>
                <button id="publishCanera1">publishCanera</button>
                <button id="unpublish1">unpublish</button>
                <button id="Mute1">mute</button>
            </div>
            <div>
                <br>mrtc://mudu.ns.4l.hk:8188/AAAAA/aascreen<br> publish url: <input type="text" id="pushurl2" class="urlinput" placeholder="mrtc://mudu.ns.4l.hk/AAAAA/pgm " />
                <div id="localVideo2" class="pushvideo"></div>
                <button id="publishScreen2">publishScreen</button>
                <button id="publishCanera2">publishCanera</button>
                <button id="unpublish2">unpublish</button>
                <button id="Mute2">mute</button>
            </div>
        </div>
        <div style="border: solid 2px #e00; height:700px; width:800px; float:left; ">
            <div class="playdiv">
                player1 url: <input type="text" id="playurl" class="urlinput" placeholder="mrtc://mudu.ns.4l.hk/AAAAA/pgm " />
                <div id="remoteVideo" class="playvideo"></div>
                <button id="start">start</button>
                <button id="stop">stop</button>
                <input type="text" id="volume1" style="width:20px;" />
                <button id="volumebtn1">volume</button>
                <button id="fullscreen1">fullscreen</button>
            </div>
            <div class="playdiv">
                player2 url: <input type="text" id="playurl2" class="urlinput" placeholder="mrtc://mudu.ns.4l.hk/AAAAA/pgm " />
                <div id="remoteVideo2" class="playvideo"></div>
                <button id="start2">start</button>
                <button id="stop2">stop</button>
                <input type="text" id="volume2" style="width:20px;" />
                <button id="volumebtn2">volume</button>
                <button id="fullscreen2">fullscreen</button>
            </div>
            <div class="playdiv">
                player3 url: <input type="text" id="playurl3" class="urlinput" placeholder="mrtc://mudu.ns.4l.hk/AAAAA/pgm " />
                <div id="remoteVideo3" class="playvideo"></div>
                <button id="start3">start</button>
                <button id="stop3">stop</button>
                <input type="text" id="volume3" style="width:20px;" />
                <button id="volumebtn3">volume</button>
                <button id="fullscreen3">fullscreen</button>
            </div>
            <div class="playdiv">
                player4 url: <input type="text" id="playurl4" class="urlinput" placeholder="mrtc://mudu.ns.4l.hk/AAAAA/pgm " />
                <div id="remoteVideo4" class="playvideo"></div>
                <button id="start4">start</button>
                <button id="stop4">stop</button>
                <input type="text" id="volume4" style="width:20px;" />
                <button id="volumebtn4">volume</button>
                <button id="fullscreen4">fullscreen</button>
            </div>
        </div>
        <div style="clear:both; "></div>
    </div>

    <script src="./mrtc.js "></script>
    <script type="text/javascript ">
        var localVideo1 = document.getElementById('localVideo1');

        var publish1 = Mrtc.setup(localVideo1);
        $('#publishScreen1').click(function() {
            var publishurl = $("#pushurl1").val();
            publish1.publishScreen(publishurl);
        });
        $('#publishCanera1').click(function() {
            var publishurl = $("#pushurl1").val();
            publish1.publishCamera(publishurl);
        });

        $('#unpublish1').click(function() {
            publish1.unpublish();
        });
        $('#Mute1').click(function() {
            publish1.togglePublishMute();
        });
        // --------------------------
        var localVideo2 = document.getElementById('localVideo2');

        var publish2 = Mrtc.setup(localVideo2);
        $('#publishScreen2').click(function() {
            var publishurl = $("#pushurl2").val();
            publish2.publishScreen(publishurl);
        });
        $('#publishCanera2').click(function() {
            var publishurl = $("#pushurl2").val();
            publish2.publishCamera(publishurl);
        });

        $('#unpublish2').click(function() {
            publish2.unpublish();
        });
        $('#Mute2').click(function() {
            publish2.togglePublishMute();
        });

        // -----------------------------
        var video = document.getElementById('remoteVideo');
        var video2 = document.getElementById('remoteVideo2');
        var video3 = document.getElementById('remoteVideo3');
        var video4 = document.getElementById('remoteVideo4');
        var currentVideo;
        var player = Mrtc.setup(video);
        $('#start').click(function() {
            var playurl = $("#playurl").val();
            player.play(playurl);
        });

        $('#stop').click(function() {
            player.stop();
        });
        $('#volumebtn1').click(function() {
            var volume = $("#volume1").val();
            player.setPlayVolume(volume);
        });
        $('#fullscreen1').click(function() {
            $('#remoteVideo').width(window.screen.width + 'px');
            $('#remoteVideo').height(window.screen.height + 'px');
            currentVideo = 'remoteVideo';
            requestFullScreen(video);
        });

        var player2 = Mrtc.setup(video2);
        $('#start2').click(function() {
            var playurl2 = $("#playurl2").val();
            player2.play(playurl2);
        });

        $('#stop2').click(function() {
            player2.stop();
        });
        $('#volumebtn2').click(function() {
            var volume = $("#volume2").val();
            player2.setPlayVolume(volume);
        });
        $('#fullscreen2').click(function() {
            $('#remoteVideo2').width(window.screen.width + 'px');
            $('#remoteVideo2').height(window.screen.height + 'px');
            currentVideo = 'remoteVideo2';
            requestFullScreen(video2);
        });

        var player3 = Mrtc.setup(video3);
        $('#start3').click(function() {
            var playurl3 = $("#playurl3").val();
            player3.play(playurl3);
        });

        $('#stop3').click(function() {
            player3.stop();
        });
        $('#volumebtn3').click(function() {
            var volume = $("#volume3").val();
            player3.setPlayVolume(volume);
        });
        $('#fullscreen3').click(function() {
            $('#remoteVideo3').width(window.screen.width + 'px');
            $('#remoteVideo3').height(window.screen.height + 'px');
            currentVideo = 'remoteVideo3';
            requestFullScreen(video3);
        });

        var player4 = Mrtc.setup(video4);
        $('#start4').click(function() {
            var playurl4 = $("#playurl4").val();
            player4.play(playurl4);
        });

        $('#stop4').click(function() {
            player4.stop();
        });
        $('#volumebtn4').click(function() {
            var volume = $("#volume4").val();
            player4.setPlayVolume(volume);
        });
        $('#fullscreen4').click(function() {
            $('#remoteVideo4').width(window.screen.width + 'px');
            $('#remoteVideo4').height(window.screen.height + 'px');
            currentVideo = 'remoteVideo4';
            requestFullScreen(video4);
        });

        document.addEventListener("fullscreenchange", FShandler);
        document.addEventListener("webkitfullscreenchange", FShandler);
        document.addEventListener("mozfullscreenchange", FShandler);
        document.addEventListener("MSFullscreenChange", FShandler);

        function FShandler(params) {
            if (document.isFullScreen ||
                document.webkitIsFullScreen ||
                document.mozIsFullScreen ||
                document.MSIsFullScreen) {
                console.log('进入全屏');
            } else {
                console.log('退出全屏');
                $('#' + currentVideo).width('280px');
                $('#' + currentVideo).height('280px');
            }
        }

        function requestFullScreen(element) {
            var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
            if (requestMethod) {
                requestMethod.call(element);
            } else if (typeof window.ActiveXObject !== "undefined") {
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }
    </script>
</body>

</html>